<!-- 个人中心 -->
<script lang="ts" setup>
import { ref } from 'vue'
const user = ref({
  nickname: 'xxx',
  introduction: '女士',
  gender: '',
  birthday: '',
  avatar: 'path/to/avatar'
})
const pgs = ref([
  {
    name: '项目一',
    msg: ' 在这个制作网页项目中，我承担了多个关键角色。首先，我负责了网页的整体设计与结构规划，确保了页面布局的合理性与美观性。其次，我积极参与了内容的编写与编辑工作，确保了网页信息的准确性与清晰度。最后，我还负责了网页的测试与优化，、确保了用户体验的流畅度与一致性。通过我的努力与贡献，成功地为项目提供了全面的支持与服务。'
  },
  {
    name: '项目一',
    msg: ' 在这个制作网页项目中，我承担了多个关键角色。首先，我负责了网页的整体设计与结构规划，确保了页面布局的合理性与美观性。其次，我积极参与了内容的编写与编辑工作，确保了网页信息的准确性与清晰度。最后，我还负责了网页的测试与优化，、确保了用户体验的流畅度与一致性。通过我的努力与贡献，成功地为项目提供了全面的支持与服务。'
  }
])
const save = () => {
  // 保存功能的实现
}
const cancel = () => {
  // 取消操作的实现
}
const more = () => {
  // ‘更多’按钮的处理
}
</script>

<template>
  <page-container title="个人中心">
    <div class="profile-container">
      <el-avatar
        :src="user.avatar"
        :size="70"
        class="profile-photo"
      ></el-avatar>
      <el-form>
        <el-form-item label="昵称">
          <el-input v-model="user.nickname"></el-input>
        </el-form-item>
        <el-form-item label="介绍">
          <el-input v-model="user.introduction" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select v-model="user.gender">
            <el-option value="male" label="男"></el-option>
            <el-option value="female" label="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker v-model="user.birthday"></el-date-picker>
        </el-form-item>
        <el-form-item class="btn">
          <el-button type="primary" @click="save">保存</el-button>
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="experience-section">
      <h2>个人项目经历</h2>
      <div v-for="(pj, index) in pgs" :key="index" class="pj-item">
        <div class="projiect">
          <h2>{{ pj.name }}</h2>
          <div class="msg">{{ pj.msg }}</div>
        </div>
      </div>
      <el-button type="primary" class="btn" @click="more">更多</el-button>
    </div>
  </page-container>
</template>

<style lang="scss" scoped>
.profile-container {
  float: left;
  width: 35%;
  margin-left: 40px;
  text-align: center;
  .profile-photo {
    margin-bottom: 20px;
  }
}
.btn {
  float: right;
}
.experience-section {
  // margin-top: 20px;
  float: left;
  width: 45%;
  font-weight: 300;
  margin-left: 40px;
  h2 {
    font-size: 36px;
    text-align: center;
  }
  .pj-item {
    width: 439px;
    height: 138px;
    margin-top: 15px;
    margin-bottom: 4px;
    padding: 8px;
    background-color: #ededed;
    border-radius: 5px;
    h2 {
      font-size: 18px;
      text-align: center;
    }
    .msg {
      font-size: 13px;
    }
  }
}
</style>
